<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 2em"
    >
      <el-breadcrumb-item :to="{ path: '/admin.html' }"
        >管理首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>其他管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理11</el-breadcrumb-item>
    </el-breadcrumb>

    <el-table :data="tableData" border style="width: 100%" v-model="tableData">
      <el-table-column
        prop="roleJurisdiction"
        label="角色编号"
        width="300"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        width="300"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="userId" label="操作" align="center" width="300">
        <template slot-scope="scope">
           <el-button type="success" @click="add.dialogVisible = true" size="small"
            >增加</el-button
          >
          <el-button type="info" @click="doUpdate(scope.row)" size="small"
            >修改</el-button
          >
         
          <el-button type="danger" @click="doDelete(scope.row)" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 增加 -->
    <el-dialog title="新增" :visible.sync="add.dialogVisible" width="30%">
      <el-form ref="form" :model="add.form" label-width="90px">
        <el-form-item label="角色编号">
          <el-input v-model="add.form.roleJurisdiction"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="add.form.roleName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="add.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAdd()">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改-->
    <el-dialog title="修改" :visible.sync="update.dialogVisible" width="30%">
      <el-form ref="form" label-width="80px">
        <el-form-item label="角色编号">
          <el-input v-model="update.form.roleJurisdiction"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="update.form.roleName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="update.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doUpdateFrom()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
  </div>
</template>

<script>
import role from "/src/api/role";

export default {
  data() {
    return {
      tableData: [],
      
      add: {
        dialogVisible: false,
        form: {
         roleJurisdiction:"",
         userName:""
        },
      },
      update: {
        dialogVisible: false,
        form: {},
      },

    };
  },
  mounted() {
    this.search();
  },
  methods: {
    //分页查询
    search() {
      role
        .get()
        .then((r) => {
          console.info(r);
          this.tableData = r.data.data;
        })
        .catch((error) => {
          console.warn(error);
        });
    },

    //增加
    doAdd() {
      role.add(this.add.form).then((r) => {
      this.add.dialogVisible = true;
        if (r.data.ok) {
          this.$message.success("添加成功");
          this.search();
          this.add.form = {
           roleJurisdiction:"",
         userName:""
          };
          this.add.dialogVisible = false;
        }
      });
    },
    doDelete(row) {
      this.$confirm(`确定删除！`).then(() => {
        role.del(row.roleId).then((r) => {
          if (r.data.ok) {
            this.$message.success("删除成功");
            this.search();
          }
        });
      });
    },
    //修改
    doUpdate(row) {
      this.update.form = { ...row };
      this.update.dialogVisible = true;
    },
    doUpdateFrom() {
      role.updateKey(this.update.form).then((r) => {
        if (r.data.ok) {
          this.$message.success("修改成功");
          this.search();
          this.update.dialogVisible = false;
        }
      });
    },

    //end
  },
};
</script>

<style scoped>
.demo-form-inline {
  margin-left: 19rem;
}
.demo-form-inline > :nth-child(2) {
  margin-right: 25rem;
}
</style>